<template>
  <div class="app-container">
      <div class="filter-container">
        <el-button type="primary" @click="addItemClick()">新增</el-button>
        <el-input clearable v-model="search.orderNum" placeholder="项目" style="width: 170px;margin-left:10px;"></el-input>
        <el-date-picker v-model="search.daterange" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="margin-left:10px;">
        </el-date-picker>

        <el-button type="primary" icon="el-icon-search" @click="searchClick()" style="margin-left:10px;">查询</el-button>
    </div>
    <el-table v-loading="listLoading" :data="list" 
      border fit highlight-current-row stripe 
      style="width: 100%">
      <el-table-column align="center" label="序" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row._id }}</span>
        </template>
      </el-table-column>
     <el-table-column  min-width="100" align="center" label="项目名称">
        <template slot-scope="scope">
          <span>{{ scope.row.activityname }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="项目类型">
        <template slot-scope="scope">
          <span>{{ scope.row.activitytype }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="具体内容">
        <template slot-scope="scope">
          <span>{{ scope.row.content }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="活动价格">
        <template slot-scope="scope">
          <span>{{ scope.row.activityprice }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="抵扣金额">
        <template slot-scope="scope">
          <span>{{ scope.row.dedutionmoney }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="制单人">
        <template slot-scope="scope">
          <span>{{ scope.row.guider }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="状态">
        <template slot-scope="scope">
          <el-tag :type="['info','success',''][scope.row.state]">{{scope.row.state?'启用':'禁用' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="日期">
        <template slot-scope="scope">
          <span>{{ scope.row.createtime | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
      
      <el-table-column align="center" label="操作"  width="300" fixed="right">
        <template slot-scope="scope">
          <el-button :type="['primary','warning'][scope.row.state]" size="small" @click="enableClick(scope.row.id)">{{['启用','禁用'][scope.row.state]}}</el-button>
          <el-popconfirm title="确定要删除这条记录吗？" icon="el-icon-info"  icon-color="red"  @onConfirm="deleteClick(scope.row.id)" >
            <el-button slot="reference" type="danger" size="small" style="margin-left:5px;" >
                删除
            </el-button>
          </el-popconfirm>

        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.rows" @pagination="getList" />

<!-- 新增 -->
<el-dialog :title="dialog.title" :visible.sync="dialog.visible"  width="700px">
    <div class="ci">
        <div class="item">
        <span class="name required">项目类型</span>
        <span class="value">
            <el-select v-model="dialog.data.activitytype" clearable placeholder="--" style="width: 220px;">
                <el-option 
                v-for="(item,index) in selectOptions.activitytype"
                :key="index"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>
            
        </span>
        </div>
        <div class="item" v-if="[1,2,6].indexOf(dialog.data.activitytype)>-1">
            <span class="name required">项目名称</span>
            <span class="value">
                <el-input clearable v-model="dialog.data.activityname" placeholder="" style="width: 220px;"></el-input>
            </span>
        </div>
        <div class="item" v-if="[3,4,5].indexOf(dialog.data.activitytype)>-1">
            <span class="name required">项目名称</span>
            <span class="value">
                <el-select v-model="dialog.data.activityname" clearable placeholder="--" style="width: 220px;">
                    <el-option 
                    v-for="(item,index) in selectOptions.activityname"
                    :key="index"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </span>
        </div>
        <div class="item">
            <span class="name required">活动价格</span>
            <span class="value">
                <el-input clearable v-model="dialog.data.activityprice" maxlength="15" placeholder="" style="width: 220px;"></el-input>
            </span>
        </div>
        <div class="item">
            <span class="name required">抵扣金额</span>
            <span class="value">
                <el-input clearable v-model="dialog.data.dedutionmoney" maxlength="15" placeholder="" style="width: 220px;"></el-input>
            </span>
        </div>
        <div class="item hauto">
            <span class="name required">备注</span>
            <span class="value">
                <el-input type="textarea" rows="3" clearable v-model="dialog.data.remark" maxlength="15" placeholder="" style="width: 100%;"></el-input>
            </span>
        </div>
    </div>
    <div slot="footer" class="dialog-footer">
        <el-button @click="dialog.visible = false">取 消</el-button>
        <el-button type="primary" @click="saveActivityClick()" :loading="dialog.saveloading">保 存</el-button>
    </div>
</el-dialog>
<!-- end 新增 -->

  </div>
</template>

<script>
import * as activityApi from '@/api/presale/activity'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import * as imageHelper from '@/utils/image'
import * as enumHelper from '@/utils/enum'


export default {
  name: 'RecordList',
  components: { Pagination },
  data(){
    return{
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        rows: 20,
        name:'',
      },
      search:{
        name:'',
        daterange:'',
      },
      selectOptions:{
          activitytype:[],
          activityname:[]
      },
      dialog:{
          visible:false,
          saveloading:false,
          title:'新增',
          //数据
          data:{
              id:'',
            activitytype:'',
            activityname:'',
            activityprice:'',
            dedutionmoney:'',
            remark:'',
          }
      },
      
    }
  },
  created(){
      var that=this;
      that.getList();

      //初始化下拉菜单
      enumHelper.initOptions(that.selectOptions.activitytype,enumHelper.presale.activityType);

  },
  filters:{
    parseContactType(state){
      return enumHelper.presale.contactType.getName(state);
    },

  },
  methods: {
    getList(){
      var that=this;
      that.listLoading = true;
      activityApi.getBaseItemList(that.listQuery).then(res=>{
         if(res.data){
            that.list=[...res.data.items.map((item,index)=>{
              item._id=index+1;
              return item;
            })];
            that.listLoading = false;
            that.total=res.data.total;

         }
      })
    },
    searchClick(){
      var that=this;
      that.listQuery.page=1;
      that.listQuery.name=that.search.name.trim();
      that.listQuery.daterange=that.search.daterange;
      that.getList();
    },
    modifyClick(id){
        var that=this;
        var modifyItem=that.list.filter(o=>o.id==id)[0];
        for(var key in that.dialog.data){
            if(modifyItem[key.toLowerCase()]!==undefined){
                that.dialog.data[key]=modifyItem[key.toLowerCase()];
            }
        }
        that.dialog.visible=true;
    },
    addItemClick(){
        var that=this;
        that.dialog.visible=true;
    },
    enableClick(id){
        var that=this;
        var selectItem=that.list.filter(o=>o.id==id)[0];
        selectItem.state=selectItem.state?0:1;
    },
    saveActivityClick(){
        var that=this;
        that.dialog.saveloading=true;
        setTimeout(()=>{
            that.dialog.saveloading=false;
            that.dialog.visible=false;
        },1000)
    },
    
    deleteClick(id){
        var that=this;
        //删除该行记录
        var index=that.list.findIndex(item=>item.id==id);
        that.list.splice(index,1);

        that.$message({
            message: '删除成功',
            type: 'success'
        });
    },
  }
}
</script>

<style scoped>
    .ci>.item.ld{
        padding:5px 10px;
    }
    .ci>.item.ld>fieldset{
        width:100%;
    }
    .fd-content>.fd-item{
        padding:5px 10px; display: flex;
    }
    .fd-content>.fd-item>span.name{
        width:100px; display: flex; align-items: center;
    }
</style>